<template>
  <view class="result-page">
    <up-navbar title="鉴定结果" :titleStyle="{color: '#333333' , fontWeight: '500' , fontSize:'34rpx'}" :autoBack="true">
    </up-navbar>
    <view class="result-content">
      <view class="content-title">
        <view class="result-title">鉴定报告</view>
        <view class="result-label">根据用户提供的信息得出，仅供参考</view>
      </view>
      <view class="result-user">
        <view class="user-info">
          <image :src="listData.expert?listData.expert.avatar:''" mode="" class="info-avatar"></image>
          <view class="info-text">
            <view class="text-name">{{listData.expert?listData.expert.nickname:''}}</view>
            <view class="text-title">擅长{{listData.expert?listData.expert.expertise:''}}</view>
          </view>
          <view class="info-btn" @click="onRelease">请他鉴定</view>
        </view>
        <view class="user-nav">
          <view class="nav-img">
            <image src="@/static/home/image/truth.png" mode="" v-show="listData.label ==1"></image>
            <image src="@/static/home/image/fake.png" mode="" v-show="listData.label ==-1"></image>
            <image src="@/static/home/image/question.png" mode="" v-show="listData.label ==2"></image>
          </view>
          <view class="nav-list">
            <view class="list-title">鉴定类型</view>
            <view class="list-nav">{{listData.category?listData.category.name:''}}</view>
          </view>
          <view class="nav-list">
            <view class="list-title">鉴定结果</view>
            <view class="list-result">{{resultActive}}</view>
          </view>
          <view class="nav-list">
            <view class="list-title">判定依据</view>
            <view class="list-nav">{{listData.decide}}</view>
          </view>
        </view>
      </view>
      <view class="result-imgs">
        <view class="img-title">鉴别外观</view>
        <view class="img-amplify">
          <up-image :src="srcActive" radius="16rpx" width="630rpx" height="630rpx" :lazy-load="true" mode="aspectFit"
            v-if="!saskShow" @click="onAmplifyImg(srcActive,'image')"></up-image>
          <DomVideoPlayer ref="domVideoPlayer" :src="srcActive" isLoading controls muted class="video-nav" v-else
            @click="onAmplifyImg(srcActive,'video')" />
        </view>
        <view class="img-list">
          <view class="list-img" v-show="listData.vedio" @click="ontaskImage(listData.vedio,'vedio')">
            <DomVideoPlayer ref="domVideoPlayer" :src="listData.vedio" muted class="info-video" />
            <image src="@/static/home/icon/play.png" mode="aspectFill" class="vedio-icon"></image>
          </view>
          <view class="list-img" v-for="item,index in listData.task_image" :key="index"
            @click="ontaskImage(item.image,'image')">
            <up-image :src="item.image" radius="16rpx" width="128rpx" height="128rpx" mode="aspectFit"
              :lazy-load="true"></up-image>
          </view>
        </view>
      </view>
      <view class="result-title">藏品信息</view>
      <view class="result-info">
        <view class="info-list">
          <view class="list-title">鉴宝人</view>
          <view class="list-nav">
            <image :src="listData.user?listData.user.avatar:''" mode="" class="info-avatar"></image>
            {{listData.user?listData.user.nickname:''}}
          </view>
        </view>
        <view class="info-list">
          <view class="list-title">藏品类型</view>
          <view class="list-nav">{{listData.category?listData.category.name:''}}</view>
        </view>
        <view class="info-list">
          <view class="list-title">鉴定证书</view>
          <view class="list-nav" style="color: #A4682F;text-decoration: underline;" @click="toCertifi">点击查看</view>
        </view>
        <view class="info-list">
          <view class="list-title">证书编号</view>
          <view class="list-nav" @click="oncopy">{{listData.no}}</view>
        </view>
        <view class="info-list">
          <view class="list-title">藏品描述</view>
          <view class="list-nav">{{listData.desc}}</view>
        </view>
        <view class="info-list">
          <view class="list-title">提交时间</view>
          <view class="list-nav">{{listData.create_time}}</view>
        </view>
      </view>
      <view class="result-btn" v-if="isOrder">
        <up-button text="我想要" shape="circle" color="#A4682F" @click="towant"></up-button>
      </view>
    </view>
  </view>
  <tab-popup :show.sync="show" :listData="classificationList" @showClose="show = false"
    @release="onrelease"></tab-popup>
</template>

<script setup>
  import {
    taskIndex
  } from './api.js'
  import {
    ref
  } from 'vue'
  import {
    onLoad
  } from '@dcloudio/uni-app'
  import DomVideoPlayer from '@/components/DomVideoPlayer/DomVideoPlayer';

  const id = ref()
  const listData = ref({})
  const srcActive = ref('')
  const resultActive = ref('')
  const show = ref(false)
  const classificationList = ref([])
  const saskShow = ref()
  const isOrder = ref(true)
  const isExpert = ref(false)
  onLoad((e) => {
    isExpert.value = uni.getStorageSync("user").is_expert == 1 ? true : false
    if (e && e.id) {
      id.value = e.id
      taskIndexAPi(e.id)
    }
  })

  function onRelease(val) {
    const data = uni.getStorageSync("classificationList")
    const list = listData.value.expert.expertise.split(',')
    classificationList.value = data.filter(item => list.includes(item.name))
    if (list.length > 1) {
      show.value = true
    } else {
      if (uni.getStorageSync('userInfo').token) {
        uni.setStorageSync('treasure', classificationList.value[0])
        uni.navigateTo({
          url: `/pages/index/identifyPage/identifyRelease?expertId=${listData.value.expert_id}`
        })
      } else {
        uni.navigateTo({
          url: '/pages/my/loginPage'
        })
      }

    }
  }

  function ontaskImage(url, type) {
    saskShow.value = type == 'image' ? false : true
    srcActive.value = url
  }
  //全屏查看
  function onAmplifyImg(url, type) {
    uni.navigateTo({
      url: `/pages/index/fullScreenPreview/FullScreenPreview?type=${type}&src=${url}`
    })
  }
  const taskIndexAPi = (async (id) => {
    const res = await taskIndex({
      task_id: id
    })
    if (res && res.code === 1) {
      const userId = uni.getStorageSync("user").id
      isOrder.value = userId == res.data.user.id ? false : true
      listData.value = res.data
      srcActive.value = res.data.vedio ? res.data.vedio : res.data.task_image[0].image
      saskShow.value = res.data.vedio ? true : false
      resultActive.value = res.data.label == 1 ? '真品' : res.data.label == -1 ? '赝品' : '存疑'
    } else {
      uni.showToast({
        title: res.msg,
        icon: 'none'
      })
    }
  })
  function oncopy() {
    uni.setClipboardData({
      data: listData.value.no,
      success() {
        uni.showToast({
          title: '复制成功',
          icon: 'success'
        });
      },
      fail() {
        uni.showToast({
          title: '复制失败',
          icon: 'none'
        });
      }
    });
  
  }
  function toCertifi(){
    uni.navigateTo({
      url: `/pages/index/certificatePage/certificateAppraisal?id=${listData.value.no}`
    })
  }
  function towant() {
    const token = uni.getStorageSync('userInfo').token
    if (token) {
      uni.navigateTo({
        url: `/pages/index/identifyPage/identifyWant?id=${id.value}`
      })
    } else {
      uni.navigateTo({
        url: '/pages/my/loginPage'
      })
    }
  }

  function onrelease() {
    show.value = false
    uni.navigateTo({
      url: `/pages/index/identifyPage/identifyRelease?expertId=${listData.value.expert_id}`
    })
  }
</script>

<style lang="scss" scoped>
  .result-page {
    background-color: #F2F2F2;
    display: flex;
    flex-direction: column;
    height: 100%;


    ::v-deep .u-navbar--fixed {
      position: sticky;
      box-sizing: border-box;
      background-color: #fff;
    }

    .result-content {
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
      padding: 0 30rpx 156rpx;
      flex: 1;
      overflow: scroll;

      .content-title {
        display: flex;
      }

      .result-label {
        font-size: 24rpx;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        margin: 48rpx 0 0 16rpx;
      }

      .result-user {
        width: 100%;
        border-radius: 16rpx;
        background: #FFFFFF;
        margin-top: 30rpx;

        .user-info {
          width: 100%;
          height: 96rpx;
          border-radius: 16rpx 16rpx 0 0;
          background: linear-gradient(90deg, $color 0%, #FFFFFF 100%);
          box-sizing: border-box;
          padding: 0 30rpx;
          display: flex;
          align-items: center;

          .info-avatar {
            width: 64rpx;
            height: 64rpx;
            border-radius: 50%;
          }

          .info-text {
            margin-left: 20rpx;
            flex: 1;

            .text-name {
              font-size: 28rpx;
              font-weight: 500;
              color: rgba(255, 255, 255, 1);

            }

            .text-title {
              font-size: 24rpx;
              font-weight: 400;
              color: rgba(255, 255, 255, 0.6);

            }
          }

          .info-btn {
            width: 144rpx;
            height: 56rpx;
            border-radius: 44rpx;
            border: 2rpx solid $color;
            font-size: 24rpx;
            font-weight: 400;
            color: $color;
            line-height: 56rpx;
            text-align: center;
          }
        }

        .user-nav {
          box-sizing: border-box;
          padding: 0 30rpx 38rpx;
          display: flex;
          flex-direction: column;
          flex: 1;
          position: relative;

          .nav-img {
            width: 120rpx;
            height: 120rpx;
            position: absolute;
            top: 30rpx;
            right: 64rpx;

            image {
              width: 120rpx;
              height: 120rpx;
            }
          }

          .nav-list {
            display: flex;
            margin-top: 30rpx;

            .list-title {
              font-size: 28rpx;
              font-weight: 400;
              color: rgba(153, 153, 153, 1);
              width: 20%;
            }

            .list-nav {
              font-size: 28rpx;
              font-weight: 400;
              color: rgba(51, 51, 51, 1);
              margin-left: 64rpx;
              flex: 1;
            }

            .list-result {
              font-size: 28rpx;
              font-weight: 400;
              color: #F52020;
              margin-left: 64rpx;
            }
          }
        }
      }

      .result-imgs {
        width: 690rpx;
        height: 906rpx;
        border-radius: 16rpx;
        background: #FFFFFF;
        margin-top: 24rpx;
        box-sizing: border-box;
        padding: 30rpx;

        .img-title {
          font-size: 28rpx;
          font-weight: 400;
          color: rgba(153, 153, 153, 1);

        }

        .img-amplify {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 630rpx;
          height: 630rpx;
          border-radius: 16rpx;
          margin-top: 24rpx;

          .video-nav {
            width: 100%;
            height: 100%;
            object-fit: contain;
          }
        }

        .img-list {
          display: flex;
          margin-top: 24rpx;
          overflow: scroll;

          .list-img {
            width: 128rpx;
            height: 128rpx;
            border-radius: 16rpx;
            flex: 0 0 auto;
            margin-right: 16rpx;
            border: 2rpx solid rgba(235, 235, 235, 1);
            position: relative;

            .vedio-icon {
              height: 48rpx;
              width: 48rpx;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
            }
          }
        }
      }

      .result-info {
        width: 690rpx;
        border-radius: 16rpx;
        background: #FFFFFF;
        box-sizing: border-box;
        padding: 0 30rpx 30rpx;
        margin-top: 30rpx;

        .info-list {
          display: flex;
          margin-top: 30rpx;

          .list-title {
            font-size: 28rpx;
            font-weight: 400;
            color: rgba(153, 153, 153, 1);
            width: 20%;
          }

          .list-nav {
            font-size: 28rpx;
            font-weight: 400;
            color: rgba(51, 51, 51, 1);
            margin-left: 64rpx;
            display: flex;
            align-items: center;
            flex: 1;

            .info-avatar {
              width: 40rpx;
              height: 40rpx;
              border-radius: 50%;
              margin-right: 12rpx;
            }
          }
        }
      }

      .result-btn {
        width: 690rpx;
        position: fixed;
        bottom: 12rpx;
        height: 88rpx;
        border-radius: 44rpx;
        background: $color;
        display: flex;
        align-items: center;
        z-index: 1;
      }

      .result-title {
        font-size: 34rpx;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
        margin-top: 40rpx;
        position: relative;
        width: max-content;
        z-index: 1;
        display: flex;
      }

      .result-title:before {
        content: "";
        width: 100%;
        height: 16rpx;
        opacity: 0.5;
        background: linear-gradient(90deg, $color 0%, transparent 100%);
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 0;
      }
    }
  }
</style>